<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            margin: 0 auto;
        }

        .main {
            width: 50%;
            height: 50%;
            background-color: slateblue;
            margin: 0 auto;
            margin-bottom: 60px;
        }

        .main p {
            text-align: center;
            line-height: 150px;
            /* background: rgb(red, green, blue); */
        }

        input {
            margin: 0 8px;
            outline: none;
            appearance: none;
        }

        /* 这里不考虑浏览器的兼容性 */
        /*控制内部显示  */
        .info input[type="range"] {
            width: 100px;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 4px;
            background: -webkit-linear-gradient(#ffa200, #ffa200) no-repeat white;
            /* background-size: 50% 100%; */
            /* 因为周期默认value=0.50正好占50% */
        }
        /* -webkit-slider-thumb仅对谷歌浏览器有效 */
        /* 控制滑动圆圈 */
        .info input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            background-color: #aaa;
            width: 8px;
            height: 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        .info input[type="range"]::-webkit-slider-thumb:hover {
            background: #666;
        }

        /* 左侧渐变色的写法,默认滑块在最左侧所以下面white为0% */
        /* .info #speed {
            background: linear-gradient(to right, #ffa200, white 0%, white);
            background-size: 100% 100%;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="main">
            <p >rga(108,87,106)</p>
        </div>
        <div class="info">
            <form action="" id="form">
                Red:
                <input type="range" name="gerColor" value="108" min="0" max="255" id="r">
                Green:
                <input type="range" name="gerColor" value="87" min="0" max="255" id="g">
                Blue:
                <input type="range" name="gerColor" value="106" min="0" max="255" id="b">
            </form>
        </div>
    </div>
    <script>
        let main=document.querySelector('.main');
        let info=document.querySelector('.info');
        let p=document.querySelector('.main').querySelector('p');
        
        // console.log(main);
        // console.log(info);
        // console.log(p);
        info.addEventListener('input',function(){
            let r=document.querySelector('#r');
            let g=document.querySelector('#g');
            let b=document.querySelector('#b');
            // console.log(r.value);
            let rval=r.value;
            let gval=g.value;
            let bval=b.value;
            main.style.background='rgb('+ rval +' +'+ gval+' +'+ bval +')';
            // 'url(' + this.src + ')';
            p.innerHTML='rgb('+ rval +','+ gval +','+ bval +')';
            if(rval==0&&gval==0&&bval==0){
                p.style.color='#fff'
            }else if(rval==255&&gval==255&&bval==255){
                p.style.color='#000'
            }
        })
    </script>
</body>

</html>